<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>角色信息</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="handleCreate">新增角色</el-button>
          </div>
          <div v-for="(item,index) in this.roles" class="text item">
            <div style="display: inline-block;line-height:36px;">
              <el-radio v-model="radio" :label="index" @change="handleAuth(index)">{{ item }}</el-radio>
            </div>
            <div style="display:inline-block;float: right;">
              <el-button icon="el-icon-edit" circle title="编辑" @click="handleEdit(index)" />
              <el-button icon="el-icon-delete" circle title="删除" @click="handleDelete(index)" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>权限信息</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="saveTreeData">保存</el-button>
          </div>
          <el-tree
            ref="tree"
            :data="data"
            show-checkbox
            node-key="name"
            highlight-current
            :props="defaultProps"
          />
        </el-card>
      </el-col>
    </el-row>

    <!--创建与编辑-->
    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle" width="20%">
      <el-form ref="tempRule" :model="temp" :rules="rules" label-width="80px" label-position="left">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="temp.name" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="SaveData">保存</el-button>
      </div>
    </el-dialog>
    <!--授权-->
    <el-dialog :visible.sync="dialogAuthVisible" :title="dialogAuthTitle">
      <el-tree
        ref="tree"
        :data="data"
        show-checkbox
        node-key="name"
        highlight-current
        :props="defaultProps"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="dialogAuthVisible=false">取消</el-button>
        <el-button type="primary" @click="saveTreeData">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { parseTime } from "@/utils"; // 工具
export default {
  data() {
    return {
      temp: {
        id: null,
        name: "",
        description: ""
      },
      data: [],
      defaultProps: {
        children: "children",
        label: "displayName"
      },
      roles: [],
      radio: "1",
      rules: {
        // 表单验证规则
        name: [
          { required: true, trigger: "blur", message: "必填字段" },
          { min: 2, max: 16, message: "长度在2-16个字符", trigger: "blur" }
        ]
      },
      dialogVisible: false,
      dialogTitle: null // 创建编辑窗口标题
    };
  },
  created() {
    this.getRoles();
  },
  methods: {
    // 获取角色列表
    getRoles() {
      this.$get("/system/role/dictionary").then(response => {
        this.roles = response.data;
      });
      this.$get("/system/account/permission").then(response => {
        this.data = response.data.permissions;
      });
    },
    // 重置数据模型
    resetTemp() {
      this.temp = {
        id: null,
        name: "",
        description: ""
      };
    },
    // 创建事件
    handleCreate() {
      this.resetTemp();
      this.dialogTitle = "创建角色";
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["tempRule"].clearValidate();
      });
    },
    // 编辑事件
    handleEdit(id) {
      this.dialogTitle = "编辑角色";
      this.dialogVisible = true;
      this.$get("/system/role/info/" + id).then(response => {
        this.temp = response.data;
      });
      this.$nextTick(() => {
        this.$refs["tempRule"].clearValidate();
      });
    },
    // 删除事件
    handleDelete(id) {
      this.$confirm("确定删除角色?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const loading = this.$loading({ text: "正在删除数据" });
          this.$delete("/system/role/delete/" + id).then(response => {
            loading.close();
            this.$message({
              message: response.message,
              type: response.success ? "success" : "error"
            });
            this.getRoles();
          });
          loading.close();
        })
        .catch(err => {
          console.error(err);
        });
    },
    // 授权事件
    handleAuth(id) {
      this.temp.id = id;
      this.$get("/system/role/permissions/" + id).then(response => {
        this.$refs.tree.setCheckedKeys(response.data);
      });
    },
    // 保存数据
    SaveData() {
      this.$refs["tempRule"].validate(valid => {
        if (valid) {
          const loading = this.$loading({ text: "正在保存数据" });
          this.$form("/system/role/save", this.temp).then(response => {
            loading.close();
            this.dialogVisible = false;
            this.$message({
              message: response.message,
              type: response.success ? "success" : "error"
            });
            this.getRoles();
          });
          loading.close();
        } else return false;
      });
    },
    // 保存授权数据
    saveTreeData() {
      if (!this.temp.id) {
        this.$message({ message: "请选择对应的角色授权", type: "error" });
        return;
      }
      const loading = this.$loading({ text: "正在授权" });
      this.$post(
        "/system/role/authoriza/" + this.temp.id,
        this.$refs.tree.getCheckedKeys()
      )
        .then(response => {
          loading.close();
          this.dialogAuthVisible = false;
          this.$message({
            message: response.message,
            type: response.success ? "success" : "error"
          });
        })
        .catch(() => {
          loading.close();
        });
    }
  }
};
</script>
<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 14px;
  cursor: pointer;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>
